<template>
  <div class="default-layout">
    <!-- 顶部导航 -->
    <el-header class="header" height="60px">
      <div class="header-left">
        <h1 class="logo">{{ title }}</h1>
      </div>
      <div class="header-right">
        <el-dropdown trigger="click" @command="handleCommand">
          <el-avatar :size="32" :src="userAvatar">
            {{ userInitials }}
          </el-avatar>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="profile">个人信息</el-dropdown-item>
              <el-dropdown-item command="settings">系统设置</el-dropdown-item>
              <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>

    <!-- 主要内容区 -->
    <el-container class="main-container">
      <!-- 侧边栏 -->
      <el-aside width="200px" class="sidebar">
        <el-menu
          :default-active="activeMenu"
          class="menu"
          router
        >
          <el-menu-item index="/workflow">
            <el-icon><Document /></el-icon>
            <span>工作流管理</span>
          </el-menu-item>
          <el-menu-item index="/execution">
            <el-icon><List /></el-icon>
            <span>执行历史</span>
          </el-menu-item>
          <el-menu-item index="/template">
            <el-icon><Files /></el-icon>
            <span>模板管理</span>
          </el-menu-item>
          <el-menu-item index="/settings">
            <el-icon><Setting /></el-icon>
            <span>系统设置</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 内容区 -->
      <el-main class="main">
        <router-view v-slot="{ Component }">
          <transition name="fade" mode="out-in">
            <component :is="Component" />
          </transition>
        </router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { Document, List, Files, Setting } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()

// 系统标题
const title = import.meta.env.VITE_TITLE || 'AI创作平台'

// 当前激活的菜单项
const activeMenu = computed(() => router.currentRoute.value.path)

// 用户头像
const userAvatar = computed(() => userStore.avatar || '')

// 用户名首字母
const userInitials = computed(() => {
  const username = userStore.username || ''
  return username.charAt(0).toUpperCase()
})

// 处理下拉菜单命令
const handleCommand = (command: string) => {
  switch (command) {
    case 'profile':
      router.push('/profile')
      break
    case 'settings':
      router.push('/settings')
      break
    case 'logout':
      userStore.logout()
      router.push('/login')
      break
  }
}
</script>

<style scoped lang="scss">
.default-layout {
  height: 100vh;
  display: flex;
  flex-direction: column;

  .header {
    background-color: #fff;
    border-bottom: 1px solid #dcdfe6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;

    .header-left {
      .logo {
        margin: 0;
        font-size: 20px;
        color: var(--el-color-primary);
      }
    }

    .header-right {
      display: flex;
      align-items: center;
    }
  }

  .main-container {
    flex: 1;
    overflow: hidden;

    .sidebar {
      background-color: #fff;
      border-right: 1px solid #dcdfe6;

      .menu {
        border-right: none;
      }
    }

    .main {
      background-color: #f5f7fa;
      padding: 0;
      overflow-y: auto;
    }
  }
}

// 路由过渡动画
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style> 